<template>
  <div class="home-recommend">
    <h3 class="recommend-title">热销推荐</h3>
    <div class="content">
      <div class="content-item border-bottom"
        v-for="item of info"
        :key="item.id"
        @click="turnDetail(item.id)">
        <img :src="item.imgUrl" alt="" class="img">
        <div class="right">
          <h4 class="site-name">{{item.title}}</h4>
          <div class="site-des">{{item.desc}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'homeRecommend',
  props: {
    info: Array
  },
  methods: {
    turnDetail (value) {
      this.$router.push({
        name: 'detail',
        params: { id: value }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.home-recommend
  width 100%
  .recommend-title
    background #bbb
    line-height 1.5
    padding-left 10px
    color #fff
    font-size 20px
  .content
    width 100%
    .content-item
      padding 5px
      display flex
      .img
        width 200px
        height 200px
      .right
        margin-left 10px
        font-size 20px
        flex 1
        .site-name
          padding-bottom 10px
        .site-des
          color #bbb
</style>
